<template>
  <div class="layout">
    <div class="content" :class="`${classPrefix}-content`">
      <slot/>
    </div>
    <Nav/>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Layout',
  props: ['classPrefix'],
};
</script>
<style lang="scss">
.layout-content {
  display: flex;
  flex-direction: column-reverse;
}
</style>
<style lang="scss" scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.content {
  flex-grow: 1;
  overflow: auto;
}
</style>